<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>手风琴</title>
	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <style type="text/css">
        *{
        	padding:0px;margin:0px;
        }
        li{
        	list-style: none;
        }
        ul{
        	width:938px;height: 405px;margin:100px auto;background:#fff;
        }
        
        .list{
        	width:100px;height: 405px;float:left;
        }
        .other{
        	width:538px;height:405px;
        }
        
    </style>

</head>
<body>
    
    <ul>
    	<li class="list"><img src="1.jpg" alt=""></li>
    	<li class="list"><img src="2.jpg" alt=""></li>
    	<li class="list other"><img src="3.jpg" alt=""></li>
    	<li class="list"><img src="4.jpg" alt=""></li>
    	<li class="list"><img src="5.jpg" alt=""></li>
    </ul>

    <script type="text/javascript">
        // $('.list').mousemove(function(event){
	       //  $(this).stop().animate({'width':"538px"}, 500);
	       //  $(this).siblings().stop().animate({'width':"100px"},500);
        // });
        
        $('.list').mouseover(function(event)){
        	$(this).stop().animate({'width':'538px'},500);
        	$(this).siblings().stop().animate({'width':'100px'},500);
        }

    </script>
	
</body>
</html>